<template>
	<view class="page tn-safe-area-inset-bottom" :style="{paddingTop: vuex_custom_bar_height + 'px'}">
		<view class="top-bg"></view>
		<dawnBar title="住院清单"></dawnBar>
		<view class="page-container" style="padding-bottom: 140rpx;">
			<pBox @search="getPage()" :search="true"></pBox>
			<view class="order--wrap tn-margin-top-sm">
				<view v-if="list.length > 0" class="tn-bg-white dawn-shadow tn-padding dawn-radius">
					<view class="list-text" v-for="(item,index) in list" :key="index">
						<view class="list__left">
							<view class="list__left__text">{{ item.LX }}</view>
						</view>
						<view class="list__right list-text__right" @click="onShowDetail(item)">
							<text class="">{{item.FY || '' }}</text>
							<text class="tn-icon-right dawn-color-grey"></text>
						</view>
					</view>
					<view class="list-text">
						<view class="list__left">
							<view class="list__left__text">合计</view>
						</view>
						<view class="list__right list-text__right">
							{{total || '' }}
						</view>
					</view>
				</view>

				<!-- 悬浮按钮-->
				<view class="tn-flex tn-footerfixed">
					<view class="tn-flex-1 justify-content-item tn-margin-sm tn-text-center">
						<tn-button @click="getPage()" class="dawn-btn-lg dawn-btn-lg__main">
							<text class="tn-icon-search-list-fill tn-padding-right-xs"></text>
							<text>查 询</text>
						</tn-button>
					</view>
				</view>
			</view>

			<view v-if="show">
				<dawnMsg :msg="msg"></dawnMsg>
			</view>
		</view>

		<tn-popup v-model="showDetail" mode="bottom" length="60%" :borderRadius="borderRadius">
			<view class="content">
				<view class="dawn-head dawn-head__fixed tn-padding-top-sm">
					<view>
						<text class="dawn-head__icon tn-icon-order-fill"></text>
						<text class="dawn-head__title">收费明细</text>
					</view>
					<view class="dawn-head__right">
						<tn-button @click=" showDetail = false" class="dawn-btn-sm dawn-btn-sm__defult">
							<text class="tn-icon-close-fill">关闭</text>
						</tn-button>
					</view>
				</view>
				<!-- <scroll-view scroll-y="true"> -->
				<view class="tn-padding-sm" style="padding-top: 60px;padding-bottom: 20px">
					<view class="list-item tn-main-gradient-indigo--dark"
						style="margin-top: 10rpx;margin-bottom: 30rpx;">
						<view class="list-badge">
							<tn-tag backgroundColor="#5F7E8B" fontColor="#FFFFFF" shape="circleRight" width="auto">
								{{ detail.LX }}
							</tn-tag>
						</view>
						<view class="list-badge-right">
							<tn-tag backgroundColor="#743F23" fontColor="#FFFFFF" shape="circleLeft" width="auto">
								¥ {{ detail.FY }}
							</tn-tag>
						</view>

						<view v-for="(item,index2) in detail.MX" :key="index2" class="tn-margin-top-sm">
							<view class="tn-bg-dawn-light tn-padding-sm dawn-radius">
								<view class="tn-flex tn-flex-direction-row tn-flex-col-center">
									<tn-badge backgroundColor="tn-main-gradient-dawn" :radius="35"
										fontColor="tn-color-white">{{ index2+1 }}</tn-badge>
									<text
										class="dawn-text-md tn-text-bold tn-margin-left-ss">{{item.SFXM || '' }}</text>
								</view>
								<view v-if="item.GG && item.GG!=='null'" class="tn-margin-top-ss">
									<text class="tn-color-black">规格：</text>
									<text class="tn-color-dawn tn-text-bold">{{ item.GG  || '' }}</text>
								</view>
								<view class="tn-margin-top-ss">
									<text class="tn-color-black">单价：</text>
									<text class="tn-text-bold tn-color-dawn">{{item.DJ || '' }}</text>
									<text class="tn-color-gray tn-padding-left-xs tn-padding-right-xs">|</text>
									<text class="tn-color-black">单位：</text>
									<text class="tn-text-bold tn-color-dawn">{{ item.DW  || '' }}</text>
									<text class="tn-color-gray tn-padding-left-xs tn-padding-right-xs">|</text>
									<text class="tn-color-black">数量：</text>
									<text class="tn-color-dawn tn-text-bold">{{ item.SL  || '' }}</text>
									<text class="tn-color-gray tn-padding-left-xs tn-padding-right-xs">|</text>
									<text class="tn-color-black">合计：</text>
									<text class="tn-color-dawn tn-text-bold">{{ item.PRICE  || '' }}</text>
								</view>
							</view>
							<view class="dawn-line"></view>
						</view>
					</view>
				</view>
				<!-- </scroll-view> -->
			</view>
		</tn-popup>


		<!-- loading -->
		<dawnLoading :show="loading"></dawnLoading>

		<!-- 悬浮按钮-->
		<NavBtn></NavBtn>
	</view>
</template>

<script>
	import page_mixin from '@/mixins/page_mixin.js'
	import dayjs from '@/plugin/dayjs/dayjs.min.js';
	import * as InhospitalApi from "@/api/hospital/inhospital.js";
	import * as ArticleApi from '@/api/cms/article.js';
	import * as api from '@/api/api.js';
	import * as config from "@/api/config.js";
	import {
		toLogin
	} from '@/libs/login.js';
	import {
		mapGetters
	} from "vuex";
	const app = getApp();

	export default {
		name: 'order',
		mixins: [page_mixin],
		computed: mapGetters(['appConfig', 'uid', 'isLogin', 'userInfo', 'patientInfo']),
		data() {
			return {
				loading: false,
				show: false,
				borderRadius: 40,
				showDetail: false,
				msg: '',
				tabsIndex: 0,
				queryData: {
					pageSize: 100,
					pageNo: 1,
					patientId: '',
					patientName: ''
				},
				status: -1,
				total: 0,
				list: [],
				detail: {}
			}
		},
		onLoad(options) {
			console.info("query onLoad")
			if (!this.isLogin) {
				toLogin();
				return;
			} else {
				// this.$nextTick(() => {
				// 	this.getPage();
				// })
			}
		},
		methods: {
			onShowDetail(item) {
				this.detail = item;
				this.showDetail = true;
			},
			search(result) {
				if (result.code === 0) {
					this.queryData = result.data;
					this.queryData.pageNo = 1;
					this.queryData.pageSize = this.$refs.pagination.pageSize;
					// this.getPage();
				}
			},
			getPage: function(page) {
				if (!this.patientInfo.id) {
					this.show = true;
					this.msg = '请先添加就诊人！';
					return;
				}
				let that = this;
				this.loading = true;
				this.show = false;
				this.$set(this, 'list', []);
				this.queryData.userId = this.patientInfo.openid;
				this.queryData.patientId = this.patientInfo.patientId;
				if(this.patientInfo.patientId === '35426'){
					this.queryData.patientId = '674323';
				}
				this.queryData.patientName = this.patientInfo.name;
				// this.queryData.beginDate = '2024-01-01';
				// this.queryData.endDate = '2024-12-31';

				InhospitalApi.dailyRecord(this.queryData).then(res => {
					this.loading = false;
					console.table(res);
					if (res.code === 0) {
						const l = res.data.ITEM || [];
						if (l.length == 0) {
							that.show = true;
							that.msg = '暂无数据';
						}
						that.$set(that, 'list', l);
						let totalCost = 0.00;
						l.forEach(function(item) {
							totalCost = that.$util.$h.Add(totalCost, item.FY);
						});
						this.total = totalCost;
					} else {
						that.show = true;
						that.msg = '暂无数据';
					}
				}).catch(err => {
					this.loading = false;
					this.show = true;
				})
			},
			navDteail(item) {
				uni.navigateTo({
					url: '/hosp/order/detail?orderNumber=' + item.registerNo
				})
			},
			formatDate: function(date) {
				return dayjs(date).format("YYYY-MM-DD");
			},
			formatDateTime: function(date) {
				return dayjs(date).format("YYYY-MM-DD HH:mm:ss");
			}
		}
	}
</script>


<style lang="scss" scoped>
	.list-text {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 10rpx 0rpx !important;
		border-bottom: 1px solid $dawn-line-color;
	
		&__right {
			font-size: $dawn-font-size-md;
		}
	}
	
	.list-icon-text,
	.list-image-text {
		padding: 15rpx 20rpx;
		border-bottom: 1px solid $dawn-theme-color-light;
	}
	
	.list {
		font-size: 14px;
	
		&__left {
			display: flex;
			align-items: center;
			justify-content: flex-start;
	
			&__icon,
			&__image {
				margin-right: 18rpx;
			}
	
			&__image {
				margin-right: 18rpx;
				width: 60rpx;
				height: 60rpx;
			}
		}
	
		&__right {
			display: flex;
			align-items: center;
			justify-content: flex-end;
		}
	}
</style>